<template>
	<view :class="mainClass" :style="myStyle" @click="onClick()">
		<image class="image" :src="src" mode="aspectFit" />
		<p class="p" v-text="label" :style="'font-size:'+fontSize+';'" />
	</view>
</template>

<script>
	export default{
		props:{
			size:{
				type:String,
				default:'50rpx'
			},
			borderSize:{
				type:String,
				default:'0rpx'
			},
			borderRadius:{
				type:String,
				default:'0rpx'
			},
			bkColor:{
				type:String,
				default:'transparent'
			},
			hoverColor:{
				type:String,
				default:'transparent'
			},
			fontSize:{
				type:String,
				default:'16rpx'
			},
			fontColor:{
				type:String,
				default:'black'
			},
			shadow:{
				type:String,
				default:'0rpx'
			},
			endStyle:{
				type:Boolean,
				default:true
			},
			src:{
				type:String,
				default:'#'
			},
			label:{
				type:String,
				default:'添加文字'
			},
			url:{
				type:String,
				default:'#'
			}
		},
		mounted(){
			const that=this;
			for(const index in that['_props']){
				if(index=='endStyle')
					break;
				that['myStyle']+='--'+index+':'+that['_props'][index]+';';
			}
		},
		data() {
			return {
				myStyle:'',
				mainClass:'main'
			}
		},
		methods: {
			onClick(){
				const that=this;
				that.$emit('myClick');
				that.mainClass='main-hover';
				setTimeout(function(){
					that.mainClass='main'
				},200);
				if(that.url!='#'){
					wx.navigateTo({
						url:that.url
					});
				}
			}
		}
	}
</script>

<style scoped>
	.main{
		width: var(--size);
		height: var(--size);
		text-align: center;
		border: var(--borderSize) solid #000000;
		border-radius: var(--borderRadius);
		background-color: var(--bkColor);
		box-shadow: 0 0 var(--shadow) 0 #666666;
	}
	.main-hover{
		width: var(--size);
		height: var(--size);
		text-align: center;
		border: var(--borderSize) solid #000000;
		border-radius: var(--borderRadius);
		background-color: var(--hoverColor);
		box-shadow: 0 0 var(--shadow) 0 #666666;
	}
	.image{
		margin-bottom: calc(var(--size)*0.08);
		position: relative;
		top: calc(var(--size)*0.07);
		width: 60%;
		height: 60%;
	}
	.p{
		color: var(--fontColor);
		font-size: var(--fontSize);
	}
</style>
